<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="shortcut icon"
      href="favicon.ico"
      type="image/x-icon"
    />
    <title>真容</title>
    <style>
      html,
      body {
        box-sizing: border-box;
        width: 97%;
        height: 100%;
        min-width: 300px;
        height: 1000px;
        margin: 0;
        padding: 0;
      }

      /* 定义滚动条的宽度和轨道颜色 */
      ::-webkit-scrollbar {
        width: 8px;
        /* 滚动条的宽度 */
        height: 8px;
        /* 水平滚动条的高度 */
      }

      /* 定义滚动条轨道的样式 */
      ::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* 轨道的背景颜色 */
      }

      /* 定义滚动条滑块的样式 */
      ::-webkit-scrollbar-thumb {
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        /* 滑块的背景颜色 */
      }

      /* 当鼠标悬停在滚动条上时，改变滑块的颜色 */
      ::-webkit-scrollbar-thumb:hover {
        background-image: linear-gradient(
          0deg,
          #16d9e3 0%,
          #30c7ec 47%,
          #46aef7 100%
        );
        /* 滑块的悬停颜色 */
      }

      .right-text {
        position: fixed;
        right: -50px;
        top: 0;
        height: 300px;
        width: 100px;
        float: right;
        font-size: 20px;
        /* 设置元素高度 */
        background: linear-gradient(to top, red, blue);
        /* 创建红到蓝的渐变背景 */
        color: transparent;
        /* 使文字颜色透明 */
        -webkit-background-clip: text;
        /* 将背景裁剪到文字形状 */
        background-clip: text;
        writing-mode: vertical-rl;
        /* 设置文字垂直显示 */
        text-align: right;
        /* 文字靠右对齐 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        position: relative;
        /* 相对定位 */
        animation: scroll 5s linear infinite alternate;
        /* 应用滚动动画 来回运动*/
      }

      @keyframes scroll {
        0% {
          top: -20vh;
        }

        100% {
          top: 50vh;
        }
      }

      .container-face-wrap {
        /* margin: 15px; */
        width: 100%;
        height: calc(100vh - 20px);
        background-color: #fff;
      }

      .title {
        display: none;
        color: rgb(255, 145, 0);
      }

      .main_back {
        position: absolute;
        border-radius: 10px;
        transform: rotate(90deg);
        width: 11em;
        height: 11em;
        background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
        z-index: -2;
        box-shadow: inset 0px 0px 180px 5px #ffffff;
      }

      .cantainer {
        display: block;
        margin: 50px 0 0 200px;
        padding: 15px;
        width: fit-content;
        height: fit-content;
      }

      .welcome {
        /* 渐变字体 */
        background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2.5em;
      }

      .info {
        font-size: 14px;
        color: #200505;
      }

      .main {
        position: fixed;
        top: 20px;
        right: 50px;
        display: flex;
        flex-wrap: wrap;
        width: 14em;
        align-items: center;
        justify-content: center;
      }

      .card {
        width: 60px;
        height: 60px;
        border-top-left-radius: 10px;
        background: lightgrey;
        transition: 0.4s ease-in-out, 0.2s background-color ease-in-out,
          0.2s background-image ease-in-out;
        background: rgba(255, 255, 255, 0.596);
        backdrop-filter: blur(5px);
        border: 1px solid transparent;
        -webkit-backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card .instagram {
        opacity: 0;
        transition: 0.2s ease-in-out;
        fill: #cc39a4;
      }

      .card:nth-child(2) {
        border-radius: 0px;
      }

      .card:nth-child(2) .twitter {
        opacity: 0;
        transition: 0.2s ease-in-out;
        fill: #03a9f4;
      }

      .card:nth-child(3) {
        border-top-right-radius: 10px;
        border-top-left-radius: 0px;
      }

      .card:nth-child(3) .dribble {
        opacity: 0;
        transition: 0.2s ease-in-out;
        fill: #ffb5d2;
      }

      .card:nth-child(4) {
        border-radius: 0px;
      }

      .card:nth-child(4) .codepen {
        opacity: 0;
        transition: 0.2s ease-in-out;
        fill: black;
      }

      .card:nth-child(5) {
        border-radius: 0px;
      }

      .card:nth-child(5) .uiverse {
        position: absolute;
        margin-left: 0.2em;
        margin-top: 0.2em;
        opacity: 0;
        transition: 0.2s ease-in-out;
      }

      .card:nth-child(6) {
        border-radius: 0px;
      }

      .card:nth-child(6) .discord {
        opacity: 0;
        transition: 0.2s ease-in-out;
        fill: #8c9eff;
      }

      .card:nth-child(7) {
        border-bottom-left-radius: 10px;
        border-top-left-radius: 0px;
      }

      .card:nth-child(7) .github {
        opacity: 0;
        transition: 0.2s ease-in-out;
        fill: black;
      }

      .card:nth-child(8) {
        border-radius: 0px;
      }

      .card:nth-child(8) .telegram {
        opacity: 0;
        transition: 0.2s ease-in-out;
        fill: #29b6f6;
      }

      .card:nth-child(9) {
        border-bottom-right-radius: 10px;
        border-top-left-radius: 0px;
      }

      .card:nth-child(9) .reddit {
        opacity: 0;
        transition: 0.2s ease-in-out;
      }

      .main:hover {
        width: 14em;
        cursor: pointer;
      }

      .main:hover .main_back {
        opacity: 0;
      }

      .main:hover .card {
        margin: 0.2em;
        border-radius: 10px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.2);
      }

      .main:hover .card:nth-child(5) {
        border: transparent;
      }

      .main:hover .text {
        opacity: 0;
        z-index: -3;
      }

      .main:hover .instagram {
        opacity: 1;
      }

      .main:hover .twitter {
        opacity: 1;
      }

      .main:hover .dribble {
        opacity: 1;
      }

      .main:hover .codepen {
        opacity: 1;
      }

      .main:hover .uiverse {
        opacity: 1;
      }

      .main:hover .discord {
        opacity: 1;
      }

      .main:hover .github {
        opacity: 1;
      }

      .main:hover .telegram {
        opacity: 1;
      }

      .main:hover .reddit {
        opacity: 1;
      }

      .card:nth-child(1):hover {
        background-color: #cc39a4;
      }

      .card:nth-child(1):hover .instagram {
        fill: white;
      }

      .card:nth-child(2):hover {
        background-color: #03a9f4;
      }

      .card:nth-child(2):hover .twitter {
        fill: white;
      }

      .card:nth-child(3):hover {
        background-color: #ffb5d2;
      }

      .card:nth-child(3):hover .dribble {
        fill: white;
      }

      .card:nth-child(4):hover {
        background-color: #1e1f26;
      }

      .card:nth-child(4):hover .codepen {
        fill: white;
      }

      .card:nth-child(5):hover {
        animation: backgroundIMG 0.1s;
        animation-fill-mode: forwards;
      }

      .card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {
        stop-color: white;
      }

      .card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {
        stop-color: white;
      }

      .card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {
        stop-color: white;
      }

      @keyframes backgroundIMG {
        100% {
          background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);
        }
      }

      .card:nth-child(6):hover {
        background-color: #8c9eff;
      }

      .card:nth-child(6):hover .discord {
        fill: white;
      }

      .card:nth-child(7):hover {
        background-color: black;
      }

      .card:nth-child(7):hover .github {
        fill: white;
      }

      .card:nth-child(8):hover {
        background-color: #29b6f6;
      }

      .card:nth-child(8):hover .telegram > path:nth-of-type(1) {
        fill: white;
      }

      .card:nth-child(8):hover .telegram > path:nth-of-type(2) {
        fill: #29b6f6;
      }

      .card:nth-child(8):hover .telegram > path:nth-of-type(3) {
        fill: #29b6f6;
      }

      .card:nth-child(9):hover {
        background-color: rgb(255, 69, 0);
      }

      .card:nth-child(9) .reddit > g circle {
        fill: rgb(255, 69, 0);
      }

      .card:nth-child(9) .reddit > g path {
        fill: white;
      }

      .text {
        position: absolute;
        font-size: 0.7em;
        transition: 0.4s ease-in-out;
        color: black;
        text-align: center;
        font-weight: bold;
        letter-spacing: 0.33em;
        z-index: 3;
      }

      #my-iframe {
        width: 100vw;
        height: 100vh;
        border: none;
      }

      /* form Start */
      body {
        background: rgba(255, 255, 255, 0.4);
      }

      .container-face-wrap .container {
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .form-container {
        background-color: #eaf3ff;
        border-radius: 5px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        /* justify-content: space-around; */
        align-items: center;
        width: 100%;
        /* height: 500px; */
        transition: all 0.3s ease-in-out;
        margin-bottom: 50px;
      }

      ul {
        padding-left: 20px;
        font-size: 15px;
      }

      li {
        margin-bottom: 10px;
      }

      ol {
        padding-left: 20px;
      }

      ol li {
        margin-bottom: 5px;
      }

      #copyButton,
      #jumpButton {
        color: #84b9f1;
      }

      #copyButton:hover,
      #jumpButton:hover {
        color: #db7c10;
        cursor: pointer;
      }

      .form-container {
        height: 800px;
        margin-top: 15px;
        padding-bottom: 40px;
        background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 10px;
        padding-bottom: 15px;
      }

      .container {
        margin-top: 40px;
        border-radius: 10px;
        background-color: #fff;
        overflow: hidden;
      }

      .form-container label {
        width: 100%;
        height: 100%;
        transition: border-color 0.3s;
      }

      .form-container input {
        padding: 15px;
        margin: 10px;
        border: 1px solid #ccc;
        transition: border-color 0.3s, box-shadow 0.3s;
        max-width: 460px;
        width: 100vw;

        border-radius: 5px;
      }

      .form-container input[type="number"]:focus,
      .form-container input[type="text"]:focus {
        box-shadow: 0 0 8px #84b9f1;
      }

      .form-container button {
        width: 40%;
        padding: 10px;
        margin-top: 10px;
        /* 调整按钮的上边距 */
        margin-bottom: 10px;
        /* 调整按钮的下边距 */
        border: none;
        border-radius: 5px;
        background-color: #4e4d4a;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      #preview {
        background-color: #84b9f1;
      }

      .form-container button:hover {
        background-color: #dc9d14;
      }

      /* @media (max-width: 768px) {
        .container-face,
        .header {
          display: none;
        }

        html,
        body {
          background-color: #fff;
          min-width: 1200px;
        }

        .container-face-wrap,
        .container {
          min-width: 100%;
          min-width: 1200px;

          position: fixed;
          top: -39px;
          right: -22px;
        }

        .form-container input,
        .form-container input {
          padding: 15px;
          margin: 10px;
          border: 1px solid #ccc;
          transition: border-color 0.3s, box-shadow 0.3s;
          max-width: 560px;
          width: 90%;

          border-radius: 5px;
        }

        ul {
          background-image: linear-gradient(0deg, #000 0%, #000 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 15px;
          font-weight: 600;
        }

        span.emoji {
          -webkit-text-fill-color: initial;
        }
      } */

      .face {
        margin-right: 50px;
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: #4e4d4a;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .face::before {
        content: "";
        position: absolute;
        top: 180px;
        width: 150px;
        height: 70px;
        background: #b57700;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
        transition: 0.5s;
      }

      .face:hover:before {
        top: 210px;
        width: 150px;
        height: 20px;
        background: #b57700;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
      }

      .eyes {
        position: relative;
        top: -40px;
        display: flex;
      }

      .eyes .eye {
        position: relative;
        width: 80px;
        height: 80px;
        display: block;
        background-color: #fff;
        margin: 0 15px;
        border-radius: 50%;
      }

      .eyes .eye::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 25px;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: #333;
        border-radius: 50%;
      }

      #result {
        width: 100%;
        overflow: auto;
        line-height: 25px;
        text-align: center;
      }

      @keyframes shake {
        0%,
        100% {
          transform: translateX(0);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
          transform: translateX(-10px);
        }

        20%,
        40%,
        60%,
        80% {
          transform: translateX(10px);
          color: red;
        }
      }

      .shake {
        animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
      }

      /* PC设备提示样式 */
      .feedback-message-pc {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f0f0f0;
        color: #333;
        padding: 8px 16px;
        border-radius: 4px;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      /* 手机设备提示样式 */
      .feedback-message-mobile {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f0f0f0;
        color: #333;
        padding: 8px 16px;
        border-radius: 4px;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      .feedback-visible {
        display: block;
        opacity: 1;
      }

      footer a {
        font-size: 13px;
      }

      /* 错误提示样式 */
      .error-message {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ffcccc;
        color: #cc0000;
        padding: 10px 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        display: none;
        /* 默认不显示 */
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      .error-message.visible {
        display: block;
        opacity: 1;
      }
    </style>
  </head>

  <body style="min-width: 1400px">
    <!-- header Stert -->
    <div class="header">
      <div class="cantainer">
        <h1 class="welcome">欢迎来到彩色之外《真容》，您好</h1>
        <div class="info">
          更多功能正在开发[截屏、录音、定位……]，或者点击GitHub查阅文档
          <a href="https://gitee.com/zhang-kun8888">Gitee</a> \
          <a href="https://gitee.com/zhang-kun8888">Github</a>
        </div>
      </div>
      <div class="main">
        <div class="card">
          <svg
            fill-rule="nonzero"
            height="30px"
            width="30px"
            viewBox="0,0,256,256"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
            class="instagram"
          >
            <g
              style="mix-blend-mode: normal"
              text-anchor="none"
              font-size="none"
              font-weight="none"
              font-family="none"
              stroke-dashoffset="0"
              stroke-dasharray=""
              stroke-miterlimit="10"
              stroke-linejoin="miter"
              stroke-linecap="butt"
              stroke-width="1"
              stroke="none"
              fill-rule="nonzero"
            >
              <g transform="scale(8,8)">
                <path
                  d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"
                ></path>
              </g>
            </g>
          </svg>
        </div>
        <div class="card">
          <svg
            height="30px"
            width="30px"
            viewBox="0 0 48 48"
            xmlns="http://www.w3.org/2000/svg"
            class="twitter"
          >
            <path
              d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
            ></path>
          </svg>
        </div>
        <div class="card">
          <svg
            height="30px"
            width="30px"
            viewBox="0 0 40 40"
            xmlns="http://www.w3.org/2000/svg"
            class="dribble"
          >
            <path
              d="M20,38.5C9.799,38.5,1.5,30.201,1.5,20S9.799,1.5,20,1.5S38.5,9.799,38.5,20S30.201,38.5,20,38.5z"
            ></path>
            <path
              d="M20,2c9.925,0,18,8.075,18,18s-8.075,18-18,18S2,29.925,2,20S10.075,2,20,2 M20,1 C9.507,1,1,9.507,1,20s8.507,19,19,19s19-8.507,19-19S30.493,1,20,1L20,1z"
              fill="#ea4c89"
            ></path>
            <path
              d="M28.352 36.914c0 0-3.032-21.087-15.63-34.292M1.269 17.848c0 0 24.2 2.117 32.075-11.102M7.804 34.152c0 0 8.624-19.807 31.058-12.194"
              stroke-miterlimit="10"
              stroke="#ea4c89"
              fill="none"
            ></path>
          </svg>
        </div>
        <div class="card">
          <svg
            height="30px"
            width="30px"
            viewBox="0 0 50 50"
            xmlns="http://www.w3.org/2000/svg"
            class="codepen"
          >
            <path
              d="M 25 4 L 4 17.34375 L 4 32.652344 L 25 46 L 46 32.65625 L 46 17.34375 Z M 25 29.183594 L 19.066406 25.070313 L 25 21.023438 L 30.933594 25.070313 Z M 27 17.605469 L 27 9.949219 L 40.429688 18.484375 L 34.410156 22.65625 Z M 23 17.605469 L 15.589844 22.65625 L 9.570313 18.484375 L 23 9.949219 Z M 12.09375 25.042969 L 8 27.832031 L 8 22.203125 Z M 15.570313 27.453125 L 23 32.605469 L 23 40.050781 L 9.589844 31.527344 Z M 27 32.605469 L 34.429688 27.453125 L 40.410156 31.527344 L 27 40.050781 Z M 37.90625 25.042969 L 42 22.203125 L 42 27.832031 Z"
            ></path>
          </svg>
        </div>
        <div
          class="card"
          title="移动简洁版-真容"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 100 100"
            height="23px"
            width="23px"
            class="uiverse"
          >
            <path
              fill="url(#paint0_linear_501_142)"
              d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"
            ></path>
            <path
              fill="url(#paint1_linear_501_142)"
              d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"
            ></path>
            <path
              fill="url(#paint2_linear_501_142)"
              d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"
            ></path>
            <defs>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                y2="87.6201"
                x2="96.1684"
                y1="0"
                x1="0"
                id="paint0_linear_501_142"
              >
                <stop stop-color="#BF66FF"></stop>
                <stop
                  stop-color="#6248FF"
                  offset="0.510417"
                ></stop>
                <stop
                  stop-color="#00DDEB"
                  offset="1"
                ></stop>
              </linearGradient>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                y2="87.6201"
                x2="96.1684"
                y1="0"
                x1="0"
                id="paint1_linear_501_142"
              >
                <stop stop-color="#BF66FF"></stop>
                <stop
                  stop-color="#6248FF"
                  offset="0.510417"
                ></stop>
                <stop
                  stop-color="#00DDEB"
                  offset="1"
                ></stop>
              </linearGradient>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                y2="87.6201"
                x2="96.1684"
                y1="0"
                x1="0"
                id="paint2_linear_501_142"
              >
                <stop stop-color="#BF66FF"></stop>
                <stop
                  stop-color="#6248FF"
                  offset="0.510417"
                ></stop>
                <stop
                  stop-color="#00DDEB"
                  offset="1"
                ></stop>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="card">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 48 48"
            width="30px"
            height="30px"
            class="discord"
          >
            <path
              d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
            ></path>
          </svg>
        </div>
        <div
          class="card"
          title="博文"
        >
          <svg
            height="30px"
            width="30px"
            viewBox="0 0 30 30"
            xmlns="http://www.w3.org/2000/svg"
            class="github"
          >
            <path
              d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"
            ></path>
          </svg>
        </div>
        <div class="card">
          <svg
            height="30px"
            width="30px"
            viewBox="0 0 48 48"
            xmlns="http://www.w3.org/2000/svg"
            class="telegram"
          >
            <path d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z"></path>
            <path
              d="M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z"
              fill="#fff"
            ></path>
            <path
              d="M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z"
              fill="#b0bec5"
            ></path>
            <path
              d="M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z"
              fill="#cfd8dc"
            ></path>
          </svg>
        </div>
        <div class="card">
          <svg
            xml:space="preserve"
            viewBox="0 0 256 256"
            height="30"
            width="30"
            version="1.1"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
            class="reddit"
          >
            <defs></defs>
            <g
              transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
              style="
                stroke: none;
                border-radius: 50%;
                stroke-width: 0;
                stroke-dasharray: none;
                stroke-linecap: butt;
                stroke-linejoin: miter;
                stroke-miterlimit: 10;
                fill: none;
                fill-rule: nonzero;
                opacity: 1;
              "
            >
              <circle
                transform="matrix(1 0 0 1 0 0)"
                style="
                  stroke: none;
                  stroke-width: 0;
                  stroke-dasharray: none;
                  stroke-linecap: butt;
                  stroke-linejoin: miter;
                  stroke-miterlimit: 10;
                  fill-rule: nonzero;
                  opacity: 1;
                "
                r="45"
                cy="45"
                cx="45"
              ></circle>
              <path
                stroke-linecap="round"
                transform="matrix(1 0 0 1 0 0)"
                style="
                  stroke: none;
                  stroke-width: 1;
                  stroke-dasharray: none;
                  stroke-linecap: butt;
                  stroke-linejoin: miter;
                  stroke-miterlimit: 10;
                  fill-rule: nonzero;
                  opacity: 1;
                "
                d="M 75.011 45 c -0.134 -3.624 -3.177 -6.454 -6.812 -6.331 c -1.611 0.056 -3.143 0.716 -4.306 1.823 c -5.123 -3.49 -11.141 -5.403 -17.327 -5.537 l 2.919 -14.038 l 9.631 2.025 c 0.268 2.472 2.483 4.262 4.955 3.993 c 2.472 -0.268 4.262 -2.483 3.993 -4.955 s -2.483 -4.262 -4.955 -3.993 c -1.421 0.145 -2.696 0.973 -3.4 2.204 L 48.68 17.987 c -0.749 -0.168 -1.499 0.302 -1.667 1.063 c 0 0.011 0 0.011 0 0.022 l -3.322 15.615 c -6.264 0.101 -12.36 2.025 -17.55 5.537 c -2.64 -2.483 -6.801 -2.36 -9.284 0.291 c -2.483 2.64 -2.36 6.801 0.291 9.284 c 0.515 0.481 1.107 0.895 1.767 1.186 c -0.045 0.66 -0.045 1.32 0 1.98 c 0 10.078 11.745 18.277 26.23 18.277 c 14.485 0 26.23 -8.188 26.23 -18.277 c 0.045 -0.66 0.045 -1.32 0 -1.98 C 73.635 49.855 75.056 47.528 75.011 45 z M 30.011 49.508 c 0 -2.483 2.025 -4.508 4.508 -4.508 c 2.483 0 4.508 2.025 4.508 4.508 s -2.025 4.508 -4.508 4.508 C 32.025 53.993 30.011 51.991 30.011 49.508 z M 56.152 62.058 v -0.179 c -3.199 2.405 -7.114 3.635 -11.119 3.468 c -4.005 0.168 -7.919 -1.063 -11.119 -3.468 c -0.425 -0.515 -0.347 -1.286 0.168 -1.711 c 0.447 -0.369 1.085 -0.369 1.544 0 c 2.707 1.98 6.007 2.987 9.362 2.83 c 3.356 0.179 6.667 -0.783 9.407 -2.74 c 0.492 -0.481 1.297 -0.47 1.779 0.022 C 56.655 60.772 56.644 61.577 56.152 62.058 z M 55.537 54.34 c -0.078 0 -0.145 0 -0.224 0 l 0.034 -0.168 c -2.483 0 -4.508 -2.025 -4.508 -4.508 s 2.025 -4.508 4.508 -4.508 s 4.508 2.025 4.508 4.508 C 59.955 52.148 58.02 54.239 55.537 54.34 z"
              ></path>
            </g>
          </svg>
        </div>
        <p class="text">HOVER<br /><br />FOR<br /><br />SOCIAL</p>
        <div class="main_back"></div>
      </div>
    </div>

    <script>
      // 点击github图标跳转到github
      document.querySelector(".github").onclick = function () {
        window.open("https://github.com/Huo-zai-feng-lang-li");
      };
      // 点击uiverse图标跳转到uiverse
      document.querySelector(".uiverse").onclick = function () {
        window.open("./reward-face-mobile.html");
        // 在当前页面打开
        // window.location.href = 'http://project.webcats.cn/bx/43924/11808/Chat-4-AI v1.21.apk';
      };
    </script>
    <!-- header End -->
    <div class="right-text">欢迎来到彩色之外《真容》，您好</div>
    <!-- 真容 Start -->
    <div
      class="container-face-wrap"
      style="min-width: 1400px"
    >
      <div class="container">
        <div class="container-face">
          <div class="face">
            <div class="eyes">
              <div class="eye"></div>
              <div class="eye"></div>
            </div>
          </div>
        </div>
        <form class="form-container">
          <div
            <style
            lang="width: 100%;
            height: 100%;
            "
          >
            <label for="ID">
              创建ID &nbsp;&nbsp;
              <input
                type="number"
                placeholder="请输入你的ID，例如：1"
                id="ID"
              /> </label
            ><br />
            <label for="toJump">
              跳转URL
              <input
                type="text"
                placeholder="请输入你的跳转链接，例如：https://www.baidu.com"
                id="toJump"
              />
            </label>
          </div>
          <button
            type="button"
            id="createUrl"
          >
            生成链接
          </button>
          <div id="result">
            ♻️:暂无链接&nbsp;<a
              href=""
              id="resultUrl"
            ></a>
          </div>
          <button
            type="button"
            id="preview"
          >
            查看图片
          </button>
          <ul>
            <h4 style="margin-bottom: 20px">
              <span class="emoji">🔨 </span>彩色之外《真容》功能简介
            </h4>
            <li>
              <strong>★必看说明★</strong>
              <p style="margin: 10px 0">
                本网站完全免费、完全免费、完全免费，仅供娱乐！一切收费，皆为骗子！找寻此网站，可在
                <a
                  href="https://github.com/Huo-zai-feng-lang-li"
                  target="_blank"
                >
                  GitHub</a
                >
                搜索。
              </p>
            </li>
            <li>
              <strong>★使用说明★</strong>
              <ol>
                <li style="margin-top: 10px">
                  框内填写QQ号、微信号生成链接，方便记忆，勿输入中文。
                </li>
                <li>
                  点击生成链接后复制生成的链接发送给自己或想要参与自拍测试的人。
                </li>
                <li>
                  链接被点开后，回到本页面，填写前面输入的数字(序号<span
                    class="emoji"
                    >1️⃣</span
                  >)，点击查看照片即可！
                </li>
                <li>
                  由于系统安全机制，iOS系统必须使用自带的Safari浏览器（或者第三方APP调用的是Safari内核）才可使用。
                </li>
                <li>
                  iOS手机较老、系统较老将无法使用，图片会显示一片空白。建议使用安卓手机。
                </li>
              </ol>
            </li>
            <li>
              <strong>★免责声明★</strong>
              <ol style="margin-top: 10px">
                <li>
                  本程序完全免费，仅供学习交流使用，请勿用于非法用途，否则后果自负！
                </li>
                <li>
                  本程序是一款浏览器自拍网站，是用户自愿点击允许的情况下自拍的程序！
                </li>
                <li>
                  本站是一个完全免费的学习交流平台，一切内容均为网友自发行为，肖像权归属原作者所有，查看照片后可以自己清空所有图片！
                </li>
              </ol>
            </li>
            <li>请收藏本站书签，以防丢失！</li>
          </ul>
        </form>
        <div
          id="feedbackMessage"
          class="feedback-message"
        ></div>
      </div>
    </div>

    <script>
      // 显示错误消息的函数
      function showError(message) {
        const errorMessage = document.createElement("div");
        errorMessage.className = "error-message";
        errorMessage.textContent = message;
        document.body.appendChild(errorMessage);
        setTimeout(() => {
          errorMessage.classList.add("visible");
        }, 10); // 稍微延迟显示，以便过渡效果能生效

        // 3秒后隐藏并移除错误消息
        setTimeout(() => {
          errorMessage.classList.remove("visible");
          setTimeout(() => {
            document.body.removeChild(errorMessage);
          }, 300); // 等待淡出动画完成后移除元素
        }, 3000);
      }
      //鼠标移动 Start
      document.querySelector("body").addEventListener("mousemove", eyeball);
      function eyeball() {
        let eyes = document.querySelectorAll(".eye");
        eyes.forEach((eye) => {
          let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
          let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
          //Math.atan2()函数返回点(x,y)和原点(g,8)之间直线的倾斜角
          let radian = Math.atan2(event.pageX - x, event.pageY - y);
          //转换成角度
          let rot = radian * (180 / Math.PI) * -1 + 270;
          eye.style.transform = `rotate(${rot}deg)`;
        });
      }
      //鼠标移动 End

      // 防抖-用于错误提示延时
      function debounce(func, wait) {
        let timeout;
        return function () {
          const context = this,
            args = arguments;
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            func.apply(context, args);
          }, wait);
        };
      }
      // 表单
      document.addEventListener("DOMContentLoaded", function () {
        const generateButton = document.querySelector("#createUrl");
        const previewButton = document.querySelector("#preview");
        const idInput = document.getElementById("ID");
        const urlInput = document.getElementById("toJump");
        const feedback = document.createElement("div");
        const container = document.querySelector(".container");
        document.querySelector(".form-container").appendChild(feedback);
        feedback.style.color = "red";
        let firstInvalid = true;

        function isValidHttpUrl(string) {
          let url;
          try {
            url = new URL(string);
          } catch (_) {
            return false;
          }
          return url.protocol === "http:" || url.protocol === "https:";
        }

        function triggerShake() {
          if (!firstInvalid) {
            container.classList.add("shake");
            container.addEventListener("animationend", () => {
              container.classList.remove("shake");
            });
          }
          firstInvalid = false;
        }
        function validateInputs() {
          const id = idInput.value.trim();
          const url = urlInput.value.trim();
          if (!id || !url) {
            showError("ID或URL不能为空");
            return false;
          }
          if (/[^\x00-\x7F]+/.test(url)) {
            showError("URL不能包含中文或其他非ASCII字符");
            return false;
          }
          if (!isValidHttpUrl(url)) {
            showError("URL格式不正确，请输入有效的http或https URL");
            return false;
          }
          return true;
        }
        const checkInputs = debounce(function () {
          const id = idInput.value.trim();
          const url = urlInput.value.trim();
          console.log("🤺🤺 id 🚀 ==>:", id);
          console.log("🤺🤺 url 🚀 ==>:", url);
          if (!id || !url) {
            feedback.textContent = "ID或URL不能为空";
            showError("ID或URL不能为空");
            triggerShake();
            generateButton.disabled = true;
            return;
          }
          if (/[^\x00-\x7F]+/.test(url)) {
            feedback.textContent = "URL不能包含中文或其他非ASCII字符";
            showError("URL不能包含中文或其他非ASCII字符");
            triggerShake();
            generateButton.disabled = true;
            return;
          }
          if (!isValidHttpUrl(url)) {
            feedback.textContent = "URL格式不正确，请输入有效的http或https URL";
            showError("URL格式不正确，请输入有效的http或https URL");
            triggerShake();
            generateButton.disabled = true;
            return;
          }
          feedback.textContent = "";
          generateButton.disabled = false;
        }, 800); //注意和.shake animation 的时间一致

        idInput.addEventListener("input", checkInputs);
        urlInput.addEventListener("input", checkInputs);

        generateButton.addEventListener("click", function (event) {
          event.preventDefault();
          checkInputs(); // 先执行输入验证
          const isValid = validateInputs();
          // console.log('🤺🤺 generateButton.disabled 🚀 ==>:', generateButton.disabled);
          // 检查按钮是否仍然被禁用，如果是，则不继续执行
          if (!isValid) {
            container.classList.add("shake");
            return;
          }

          // 如果输入有效，继续执行链接生成逻辑
          const id = idInput.value.trim();
          const url = encodeURIComponent(urlInput.value.trim());
          const resultUrl = `https://zhaoyaojing.wanxiangyuanma.com/capture.php?id=${id}&url=${url}`;
          const resultLink = document.getElementById("resultUrl");
          resultLink.href = resultUrl;
          resultLink.textContent = resultUrl;
          document.getElementById("result").innerHTML = `
                    🤖 <a href="${resultUrl}" id="resultUrl" 
                        target="_blank">${resultUrl}</a>
                        <span id="copyButton">✅复制</span>
                        <span id="jumpButton">👁️跳转</span>
                    `;

          function isMobileDevice() {
            return (
              typeof window.orientation !== "undefined" ||
              navigator.userAgent.indexOf("IEMobile") !== -1
            );
          }
          // 复制
          document
            .getElementById("copyButton")
            .addEventListener("click", function () {
              if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard
                  .writeText(resultUrl)
                  .then(() => {
                    showFeedback("🤖链接已复制到剪贴板");
                  })
                  .catch((err) => {
                    fallbackCopyTextToClipboard(resultUrl);
                  });
              } else {
                // 使用旧方法
                fallbackCopyTextToClipboard(resultUrl);
              }
            });

          function showFeedback(message) {
            const feedbackMessage = document.createElement("div");
            document.body.appendChild(feedbackMessage);
            feedbackMessage.textContent = message;
            const feedbackClass = /Mobi|Android/i.test(navigator.userAgent)
              ? "feedback-message-mobile"
              : "feedback-message-pc";
            feedbackMessage.className = `${feedbackClass} feedback-visible`;
            setTimeout(() => {
              feedbackMessage.classList.remove("feedback-visible");
              document.body.removeChild(feedbackMessage);
            }, 1500);
          }

          function fallbackCopyTextToClipboard(text) {
            const textArea = document.createElement("textarea");
            // 设置textarea样式使其不在屏幕上显示
            textArea.style.position = "fixed"; // 使用fixed定位
            textArea.style.top = "0"; // 定位到顶部
            textArea.style.left = "-9999px"; // 移出可视区域
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            try {
              const successful = document.execCommand("copy");
              const msg = successful
                ? "🤖链接已复制到剪贴板"
                : "😒复制链接到剪贴板失败，请手动复制";
              showFeedback(msg);
            } catch (err) {
              showFeedback("😒复制链接到剪贴板失败，请手动复制");
            }
            document.body.removeChild(textArea);
          }

          // 添加跳转按钮的事件监听器
          document
            .getElementById("jumpButton")
            .addEventListener("click", function () {
              window.open(resultUrl, "_blank");
            });
        });

        previewButton.addEventListener("click", function () {
          const id = idInput.value.trim();
          if (!id) {
            alert("😎ID不能为空");
            return;
          }
          const galleryUrl = `https://zhaoyaojing.wanxiangyuanma.com/gallery.php?id=${id}`;
          window.open(galleryUrl, "_blank");
        });
      });
    </script>
    <!-- 真容 End -->
  </body>
</html>
